<template>
    <div>
        <Header :title="t('home.Mine.card')">
            <template #left>
                <van-icon name="arrow-left" color="#fff" size="25px" class="icon-left" @click="goBack()" />
            </template>
        </Header>
        <main>
            <div class="bankName">
                <myInput class="myInput Input" :disabled="isDisable ? false : true" icon-name="browsing-history"
                    v-model="cardForm.bankName" :placeholder="t('card.bankName')">
                </myInput>
                <div class="select" @click="selectBank">
                    {{ t('card.select') }}
                </div>
            </div>
            <myInput class="Input" :disabled="isDisable ? false : true" icon-name="browsing-history"
                v-model="cardForm.bankNumber" :placeholder="t('card.bankNumber')">
            </myInput>
            <myInput class="Input" :disabled="isDisable ? false : true" icon-name="browsing-history"
                v-model="cardForm.bankUserName" :placeholder="t('card.bankUserName')">
            </myInput>
            <myInput class="Input" :disabled="isDisable ? false : true" icon-name="browsing-history"
                v-model="cardForm.bankAddress" :placeholder="t('card.bankAddress')">
            </myInput>
            <div :class="['submit', { isDisable: isDisable }]" @click="submit">
                {{ t('card.submit') }}
            </div>
        </main>
        <van-action-sheet :round="false" v-model:show="show">
            <div v-for="(item, index) in actions" :key="index" class="bankList" @click="onSelect(item.name)">
                {{ item.name }}
            </div>
        </van-action-sheet>
    </div>
</template>

<script setup>
import Header from "@/components/Header/index.vue";
import myInput from '@/components/Input/index.vue';
import useLanguage from '@/hooks/useLanguage';
import { useRouter } from 'vue-router'
import { reactive, ref, onMounted } from 'vue'
import { userApi } from '@/api'
import { storeToRefs } from 'pinia'
import { UserStore } from '@/store/user';
import { showNotify } from 'vant';

const userStore = UserStore()
const { userInfo } = storeToRefs(userStore)
const router = useRouter()
const { t } = useLanguage()
function goBack() {
    router.go(-1)
}


const cardForm = reactive({
    bankName: '',
    bankNumber: '',
    bankUserName: '',
    phone: userInfo.value.phone,
    bankAddress: '',
    userId: userInfo.value.id,
})
const rules = {
    bankName: [{ rule: /\S+/, message: t('card.bankName-notEmp') }],
    bankNumber: [{ rule: /^.{9,18}$/, message: t('card.bankNumber-notEmp') }],
    bankUserName: [{ rule: /\S+/, message: t('card.bankUserName-notEmp') }],
    bankAddress: [{ rule: /\S+/, message: t('card.bankAddress-notEmp') }],
}
function validate(key) {
    let s = true
    rules[key].forEach(v => {
        if (!v.rule.test(cardForm[key])) {
            // 弹窗
            showNotify({ type: 'warning', message: v.message })
            s = false
            return false
        }
    })
    return s
}
function submit() {
    if (isDisable.value) {
        return
    }
    if (!validate('bankName')) return // 当validate('bankName')为false才执行
    if (!validate('bankNumber')) return // 当validate('bankNumber')为false才执行
    if (!validate('bankUserName')) return // 当validate('bankUserName')为false才执行
    if (!validate('bankAddress')) return // 当validate('bankAddress')为false才执行
    // 登录
    addBank()
}
async function addBank() {
    // console.log(cardForm);
    const { code, data } = await userApi.addBank(cardForm)
    if (code == 20000) {
        showNotify({ type: 'success', message: t('authentication.authentication-success') })
        goBack()
    }
}

const isDisable = ref(false)
async function getBankListByUserId() {
    const { code, data } = await userApi.getBankListByUserId()
    if (code === 20000) {
        if (data.length == 0) {
            isDisable.value = false
        } else {
            isDisable.value = true
            cardForm.bankName = data[0].bankName
            cardForm.bankNumber = data[0].bankNumber
            cardForm.bankUserName = data[0].bankUserName
            cardForm.bankAddress = data[0].bankAddress
        }
    }
}
const show = ref(false)
function selectBank() {
    show.value = true;
}
const onSelect = (name) => {
    // 默认情况下点击选项时不会自动收起
    // 可以通过 close-on-click-action 属性开启自动收起
    cardForm.bankName = name
    show.value = false;
};
const actions = [
    { name: '中国银行' },
    { name: '工商银行' },
    { name: '建设银行' },
    { name: '农业银行' },
    { name: '交通银行' },
    { name: '浦发银行' },
    { name: '华夏银行' },
    { name: '中信银行' },
    { name: '招商银行' },
    { name: '兴业银行' },
    { name: '民生银行' },
    { name: '平安银行' },
    { name: '邮政储蓄' },
    { name: '光大银行' },
    { name: '上海银行' },
    { name: '宁波银行' },
    { name: '汇丰银行' },
    { name: '花旗银行' },
];

onMounted(() => {
    getBankListByUserId()
})
</script>

<style lang="less" scoped>
.icon-left {
    margin-left: 10px;
}

main {
    padding-top: 10px;

    .bankName {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 20px;
        box-sizing: border-box;

        .myInput {
            margin-right: 10px;

            // /deep/ input {
            //     font-size: 16px;
            // }
        }

        .select {
            width: 30%;
            height: 50px;
            line-height: 50px;
            border-radius: 5px;
            box-shadow: 0px 1px 5px #D18D8B;
            color: #fff;
            background-color: #EF5350;
            word-break: keep-all;
            text-align: center;
            font-size: 15px;
        }
    }

    .submit {
        background-color: #EF5350;
        margin: 20px;
        height: 40px;
        text-align: center;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        box-shadow: 0px 1px 5px #BBBBBB;
        font-size: 15px;
    }

    .isDisable {
        background-color: #F5F5F5;
        color: #BBBBBB;
    }
}

.bankList {
    margin: 5px 20px 20px;
    font-size: 16px;
}
</style>